import { View, Text } from '@tarojs/components';
import { AtTag, AtDivider } from 'taro-ui';
import "taro-ui/dist/style/components/divider.scss";
import "taro-ui/dist/style/components/tag.scss";
import css from './index.module.less';

export default function InterestCard(props) {

    const { title, finish, questionCategory, answerTime, orgName, correctRate } = props.info;
    let tagColor = '';
    if (finish) tagColor = 'rgb(7,193,96)';
    else tagColor = 'rgb(230,67,64)';
    return (
        <View className={css.card}>
            <View className={css.topInfo}>
                <Text className={css.title}>{title}</Text>
                <AtTag circle className={css.tag} customStyle={{ background: tagColor }} size='small'>{finish ? '完成' : '未完成'}</AtTag>
                <AtTag circle className={css.tag} customStyle={{ background: 'orange' }} size='small'>{questionCategory}</AtTag>
                {
                    correctRate === null ? <></> :
                        <AtTag circle className={css.tag} customStyle={{ background: 'rgb(24,144,255)' }} size='small'>正确率:{correctRate}%</AtTag>
                }
            </View>
            <View className={css.bottomInfo}>
                <View>{orgName}</View>
                <View className={css.time}>{finish ? answerTime : ''}</View>
            </View>
            <View className={css.dividerBox}>
                <AtDivider className={css.divider} lineColor='#999999' />
            </View>
        </View>
    );
}
